<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="" content="">
  <!-- 兼容性视图 -->
  <meta http-equiv="" content="">
  <meta content="" name="description">
  <title>js实现搜索框</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <style>
	*{
		margin:0;
		paading:0;
	}
	
    body {
      height: 100%;
	  width:100%;
    }


    #mid{
		width:100%;
		height:235px;
		pisition:relative;
	}
	
	.mid{
	    width:50%; 
		height:150px;
		margin:auto;
		line-height:150px;
		margin-top:100px; 
		text-align:center;   
		float:center;
    }

    .input {
      width: auto;
      height: 55px;
      position: relative;
	  text-align:center;
    }

    .text {
      border: 1px solid #b6b6b6;
      width: 495px;
      background: #fff;
      height: 33px;
      line-height: 33px;
      font-size: 18px;
      padding: 3px 0 0 7px;
    }

    #btn {
      width: 90px;
      height: 38px;
	  line-height:38px;
      color: #fff;
      font-size: 16px;
      letter-spacing: 3px;
      background: #3385ff;
      border: .5px solid #2d78f4;
      margin-left: -5px;
      vertical-align: top;
      opacity: 0.9;
    }

    #btn a:hover {
      opacity: 1;
      box-shadow: 0 1px 1px #3385ff;
      cursor: pointer;
	  line-height:38px;
	  text-decoration:none;
    }
    
	#btn a{
		text-decoration:none;
	}
	
	.search_resul{
		width:505px;
		height:auto;
		border:1px solid #3385ff;
		padding-top:10px;
	}
	
	.search_result li{
		list-style:none;
	}
	
	
	</style>
</head>

<body>
<div id="app">
<!--导航-->

<!--中间-->
  <div id="mid">
  <!--图片-->
    <div class="mid" >
        <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank">
          <img  height=130 width=270 src="bd_logo1.png" title="百度一下你就知道"/>
        </a>  
    </div>
<!--输入框-->
    <div class="input" id="input">
       <input type="text" class="text" autofocus v-model="textInput" v-on:input="inputtext" placeholder="请输入关键字">
		
	   <button type="button" id="btn"><a href="message.html" target="_blank"> 百度一下</a></button>
	   <div class="search_result" v-show="seen">
			<li v-for="item in datas">
			{{ item.name }}
			</li>
		</div>
    </div>	
 </div>
 
 
</div> 

<script>
	var vm=new Vue({
		el:'#app',
		data:{
		  textInput:"",
		  seen:false,
		  search_result:[
				{name:"apple"},
				{name:"我是vue"},
				{name:"个性设置，点我看看"},
				{name:"Windows"},
				{name:"beach"}
		  ]
	  },
	methods:{
		//监听输入事件，当input中有内容时，下面的搜索列表显示出来
		inputtext(){
		  if(this.textInput.length>0){
			this.seen = true;
		  }else{
			this.seen = false
		  }
		}
	  },
	//计算属性，当输入内容的时候下面的方法就会根据你输入的内容来过滤serch_result数组中的数据
	  computed: {
		datas() {
		  var textInput = this.textInput;
		  if (textInput) {
			return this.search_result.filter(function(product) {
			  return Object.keys(product).some(function(key) {
				return String(product[key]).toLowerCase().indexOf(textInput) > -1
			  })
			})
		  }
		  return this.products
		}
	 }
	})

</script>

  
  
</body>

</html>